<template>
  <div>
    <el-card class="box-card">
      <div class="top">
        <div>
          <el-icon>
            <Search />
          </el-icon>
          <span>筛选搜索</span>
        </div>
        <div>
          <el-button>重置</el-button>
          <el-button type="primary" @click="searchfn">查询搜索</el-button>
        </div>
      </div>
      <div class="bottom">
        <div class="search">
          <span>输入搜索 : </span>
          <input v-model="keyword" type="text" placeholder="请输入商品货号">
        </div>
        <div class="search">
          <span>商品货号 : </span>
          <input v-model="productSn" type="text" placeholder="请输入商品货号">
        </div>
        <div class="searchShop">
          <span>商品分类 : </span>
          <el-cascader v-model="productCategoryId" :options="Category" @change="handleChange" placeholder="请输入商品分类" />
        </div>
        <div class="searchShop">
          <span>商品品牌 : </span>
          <el-select v-model="brandId" placeholder="请输入品牌" size="large">
            <el-option v-for="item in brandOption" :key="item.value" :value="item.value" />
          </el-select>
        </div>
        <div class="searchShop">
          <span>上架状态 : </span>
          <el-select v-model="publishStatus" placeholder="全部" size="large">
            <el-option v-for="item in publishOption" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </div>
        <div class="searchShop">
          <span>审核状态 : </span>
          <el-select v-model="verifyStatus" placeholder="全部" size="large">
            <el-option v-for="item in verifyOption" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </div>
      </div>
    </el-card>
    <!-- 添加 -->
    <Add />
    <!-- 表格 -->
    <Table />
  </div>
</template>


<script setup lang='ts'>
import Add from "./components/add.vue"
import Table from "./components/productTable.vue"
import { computed, reactive, ref, watch } from "vue";
import EventBus from '@/utils';
import { useTable } from '@/hook/table'
import * as http from "@/request/api"

const keyword = ref('')//商品名称模糊关键字
const productSn = ref('')//商品货号
const productCategoryId = ref('')//商品分类
const brandId = ref('')//商品品牌
const publishStatus = ref('')//上架状态
const verifyStatus = ref('')// 审核状态


// 商品分类
interface ICategory {
  value: string,
  label: string,
  children: {}[],
}
const Category = reactive<ICategory[]>([])

// 商品品牌编号
const brandOption = reactive<{ [index: string]: string }[]>([])

// 上架状态
const publishOption = [
  {
    value: '上架',
    label: '上架',
  },
  {
    value: '下架',
    label: '下架',
  },
]

// 审核状态
const verifyOption = [
  {
    value: '审核通过',
    label: '审核通过',
  },
  {
    value: '未审核',
    label: '未审核',
  },
]

let params = reactive<IProductList>({})
let brandlist = useTable(http.product.BrandList, params)
watch(
  () => brandlist.list,
  (val) => {
    for (let key in val.value) {
      brandOption.push({ value: val.value[key].name })
    }
  },
  { deep: true }
)

function handleChange() { }

// 搜索
function searchfn() {
  EventBus.emit('productSearch', {
    keyword, productSn, productCategoryId, brandId, publishStatus, verifyStatus
  })
}

// 处理商品分类
try {
  let ProductCategoryListRes = await http.product.ProductCategoryListwithChildren()
  if (ProductCategoryListRes.code === 200) {
    ProductCategoryListRes.data.map((item: ICategoryChildrenRse, index: number) => {
      Category.push({ value: item.name, label: item.name, children: [] })
      item.children.map(el => {
        Category[index].children.push({ value: el.name, label: item.name })
      })
    })
  }
} catch (err) {
  console.log('获取数据失败');
}



</script>
  
<style scoped>
.crumber {
  padding: 18px;
  border-bottom: 1px solid rgb(235, 232, 232);
}

.content-box {
  padding: 10px;
  box-sizing: border-box;
  height: 590px;
  overflow: auto;
  overflow-x: hidden;
}

.box-card {
  width: 99%;
  margin: 10px 0;
  /* height: 128px; */
  font-size: 14px;
}

.box-card .top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.box-card .bottom {
  margin: 20px;
  color: gray;
  display: flex;
  flex-wrap: wrap;
}

.search input {
  border: 1px solid rgb(218, 216, 216);
  height: 40px;
  border-radius: 5px;
  padding-left: 5px;
  color: rgb(201, 191, 191);
  font-size: 12px;
  outline-color: rgb(179, 175, 175);
  width: 210px
}

.box-card .bottom>div {
  width: 350px;
  margin-bottom: 20px;
}

.searchShop {
  width: 350px;
  margin-bottom: 20px;
  width: 210px
}

:deep(.el-cascader .el-input) {
  height: 40px;
}
</style>